<template>
  <div class="sidebar">
    <van-nav-bar
      title="标题"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="aside">
      <div class="box">
        <p>
          <van-icon name="comment-circle-o" size="20px" /> <span>我的消息</span
          ><van-icon name="arrow" />
        </p>
        <p>
          <van-icon name="coupon-o" size="20px" /> <span>云贝中心</span
          ><van-icon name="arrow" />
        </p>
        <p>
          <van-icon name="award-o" size="20px" /><span>创作者中心</span
          ><van-icon name="arrow" />
        </p>
      </div>
      <div class="box">
        <div>音乐服务</div>
        <p>
          <van-icon name="free-postage" size="20px" /><span>云村有票</span
          ><van-icon name="arrow" />
        </p>
        <p>
          <van-icon name="shopping-cart-o" size="20px" /><span>商城</span
          ><van-icon name="arrow" />
        </p>
        <p>
          <van-icon name="coupon-o" size="20px" /><span>Beat交易平台</span
          ><van-icon name="arrow" />
        </p>
        <p>
          <van-icon name="aim" size="20px" /><span>游戏专区</span
          ><van-icon name="arrow" />
        </p>
        <p>
          <van-icon name="desktop-o" size="20px" /><span>口袋彩铃</span
          ><van-icon name="arrow" />
        </p>
      </div>
      <div class="box">
        <div>其他</div>
        <p>
          <van-icon name="setting-o" size="20px" /><span>设置</span
          ><van-icon name="arrow" />
        </p>
        <p>
          <van-icon name="eye-o" size="20px" /><span>夜间模式</span>
          <van-icon name="arrow" />
        </p>
        <p>
          <van-icon name="underway-o" size="20px" /><span>定时关闭</span
          ><van-icon name="arrow" />
        </p>
        <p>
          <van-icon name="user-o" size="20px" /><span>个性装扮</span
          ><van-icon name="arrow" />
        </p>
        <p>
          <van-icon name="music-o" size="20px" /><span>边听边存</span
          ><van-icon name="arrow" />
        </p>
        <p>
          <van-icon name="service-o" size="20px" /><span>在线听歌免流量</span
          ><van-icon name="arrow" />
        </p>
        <p>
          <van-icon name="close" size="20px" /><span>音乐黑名单</span
          ><van-icon name="arrow" />
        </p>
        <p>
          <van-icon name="warning-o" size="20px" /><span>青少年模式</span
          ><van-icon name="arrow" />
        </p>
        <p>
          <van-icon name="clock-o" size="20px" /><span>音乐闹钟</span
          ><van-icon name="arrow" />
        </p>
      </div>
      <div class="box">
        <p>
          <van-icon name="balance-list-o" size="20px" /><span>我的订单</span
          ><van-icon name="arrow" />
        </p>
        <p>
          <van-icon name="gold-coin-o" size="20px" /><span>优惠券</span
          ><van-icon name="arrow" />
        </p>
        <p>
          <van-icon name="manager-o" size="20px" /><span>我的客服</span
          ><van-icon name="arrow" />
        </p>
        <p>
          <van-icon name="share-o" size="20px" /><span>分享网易云音乐</span
          ><van-icon name="arrow" />
        </p>
        <p>
          <van-icon name="cart-o" size="20px" /><span
            >个人信息收集与使用清单</span
          ><van-icon name="arrow" />
        </p>
        <p>
          <van-icon name="smile-o" size="20px" /><span
            >个人信息第三方共享清单</span
          ><van-icon name="arrow" />
        </p>
        <p>
          <van-icon name="cluster-o" size="20px" /><span
            >个人信息与隐私保护</span
          ><van-icon name="arrow" />
        </p>
        <p>
          <van-icon name="warning-o" size="20px" /><span>关于</span
          ><van-icon name="arrow" />
        </p>
      </div>
    </div>
    <div class="btn" @click="off">退出登录</div>
  </div>
</template>

<script>
import axios from "axios";
import Cookies from "js-cookie";

// Cookies.set();
export default {
  data() {
    return {};
  },
  computed: {},
  watch: {},
  methods: {
    async off() {
      const result = await axios.post("http://192.168.1.107:3000/logout");
      console.log(result);
      alert("退出登录成功");
      Cookies.remove("token");
      // window.localStorage.removeItem("token");
      this.$router.push("/login");
      // window.sessionStorage.clear(token);
    },
    async onClickLeft() {
      this.$router.go(-1);
    },
  },
  created() {},
  mounted() {},
  components: {},
};
</script>
<style scoped>
.sidebar {
  background-color: rgb(245, 245, 245);
}
.aside {
  width: 80%;
  background-color: rgb(245, 245, 245);
}
.box {
  width: 90%;
  background-color: white;
  margin-top: 20px;
  margin-left: 5%;
  border-radius: 10px;
}
.box p {
  height: 30px;
  line-height: 20px;
  display: flex;
  justify-content: space-between;
  border-bottom: 0.5px solid #cecece;
  margin-left: 10px;
  margin-right: 10px;
  cursor: pointer;
}
.box p:last-child {
  border: none;
}
span {
  flex: 0.8;
}
.btn {
  margin-left: 50px;
  width: 200px;
  height: 40px;
  border-radius: 10px;
  line-height: 40px;
  text-align: center;
  background-color: white;
  color: red;
  cursor: pointer;
}
</style>
